<template>
  <el-button @click="addYhj()">创建优惠卷</el-button>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="活动编号" width="180" />
    <el-table-column prop="name" label="活动名称" width="180" />
    <el-table-column prop="typeName" label="优惠卷类型" />
    <el-table-column prop="price" label="满额限制" />
    <el-table-column prop="radius" label="使用范围" />
    <el-table-column prop="applicableObject" label="适用对象" />
    <el-table-column prop="state" label="活动状态">
      <template #default="scope">
        {{
          scope.row.state == 0
            ? "未开始"
            : scope.row.state == 1
            ? "疯抢中"
            : "已结束"
        }}
      </template>
    </el-table-column>
    <el-table-column prop="" label="操作">
      <el-button type="danger" round @click="fghjkl()">点击领取</el-button>
    </el-table-column>
  </el-table>
  <el-dialog v-model="dialogFormVisible" title="优惠卷详情" width="900">
    <el-form :model="eventsData">
      <el-form-item label="活动名称" :label-width="formLabelWidth">
        <el-input v-model="eventsData.name" autocomplete="off" />
      </el-form-item>

      <el-form-item label="优惠价类型" :label-width="formLabelWidth">
        <el-form-item label="">
          <el-radio-group v-model="eventsData.typeName">
            <el-radio value="满减">满减</el-radio>
            <el-radio value="折扣">折扣</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form-item>

      <el-form-item label="满额限制" :label-width="formLabelWidth">
        <el-input v-model="eventsData.price" autocomplete="off" />
      </el-form-item>

      <el-form-item label="开放时间" :label-width="formLabelWidth">
        <div class="block">
          <span class="demonstration">开始时间</span>
          <el-date-picker
            v-model="eventsData.beginTime"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </div>
        ---
        <div class="block">
          <span class="demonstration">结束时间</span>
          <el-date-picker
            v-model="eventsData.endTime"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </div>
      </el-form-item>

      <el-form-item label="发送数量" :label-width="formLabelWidth">
        <el-input v-model="eventsData.num" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addEventsaa()"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
import axios from "axios";
import router from "@/router/index";
import { onMounted } from "vue";
import { storeToRefs } from "pinia";
import { useCounterStore } from "@/stores/counter";
import { eventsList, addEvents } from "@/api/api";

const dialogTableVisible = ref(false);
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const tableData = ref([]);
const page = async () => {
  let d = await eventsList();
  if (d.data.flag) {
    tableData.value = d.data.data;
  }
};
onMounted(() => {
  page();
});
const eventsData = ref({
  name: "",
  typeName: "",
  price: "",
  beginTime: "",
  endTime: "",
  num: "",
});
const addYhj = async () => {
  dialogFormVisible.value = true;
};

const addEventsaa = async () => {
  let d = await addEvents(eventsData.value);
  if (d.data.flag) {
    alert("添加成功");
    page();
  }
  dialogFormVisible.value = false;
};

const stateData = ref({
  kkkk: 0,
});
const fghjkl = async () => {
  if (stateData.value.kkkk == 0) {
    alert("活动未开始");
  }
};
</script>
